<!DOCTYPE HTML>
<html lang="zh-CN">
<head><meta name="generator" content="Hexo 3.9.0">
	<!--Setting-->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<meta http-equiv="Cache-Control" content="no-siteapp">
	<meta http-equiv="Cache-Control" content="no-transform">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta name="apple-mobile-web-app-capable" content="波波老师的博客">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no,email=no,adress=no">
	<meta name="browsermode" content="application">
	<meta name="screen-orientation" content="portrait">
	<meta name="theme-version" content="1.2.3">
	<meta name="root" content="/">
	<!--SEO-->
	<meta name="keywords" content="波波老师,Spring Cloud,Docker,微服务架构,Spring Boot,经验分享,软件代做,毕业设计,博客建站">
	<meta name="description" content="Spring Cloud、Docker、微服务架构、Cloud Native相关知识分享、波波老师的博客,毕业设计代做">
	<meta name="robots" content="all">
	<meta name="google" content="all">
	<meta name="googlebot" content="all">
	<meta name="verify" content="all">
	<!--Title-->
	<title> 波波老师的分类博客</title>
	<link rel="alternate" href="#" title="波波老师的博客" >
	<link rel="icon" href="static/picture/favicon2.png">
	<link rel="stylesheet" href="static/css/bootstrap.min.css">
	<link rel="stylesheet" href="static/css/jquery.fancybox.css">
	<link rel="stylesheet" href="static/css/font-awesome.min.css">
	<link rel="stylesheet" href="static/css/style.css">








	<script>
		var _hmt = _hmt || [];
		(function() {
			var hm = document.createElement("script");
			hm.src = "https://hm.baidu.com/hm.js?04983d21727b02deb6771184cf02f865";
			var s = document.getElementsByTagName("script")[0];
			s.parentNode.insertBefore(hm, s);
		})();
	</script>

	<style>
	 .center-block{
		 width: 100%;
	 }
		.articleTypeList{
			font-size: 17px;
			margin-left: 20px;
		}
		.articleTypeList p{
			padding-top: 10px;
			margin-bottom: 10px;
		}
	</style>

</head>

</html>
<!--[if lte IE 8]>
<style>
	html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->

<body>
<div id="app">
	<nav class="main-navigation">
		<div class="container">
			<div class="row clearfix">
				<div class="col-md-12 column">
					<nav class="navbar navbar-default" style="background-color:#fff;border:0;margin-bottom:0"
						 role="navigation">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse"
									data-target="#navbar-collapse-1">
								<span class="sr-only">切</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
							<a class="logo" href="index.html">
								<img src="static/picture/favicon2.png"/>波波老师的博客
							</a>
						</div>

						<div class="collapse navbar-collapse" style="border:0;" id="navbar-collapse-1">
							<ul class="nav navbar-nav">


								<li>
									<a href="index.html" >
										<i class="fa fa-home"></i>
										首页
									</a>
								</li>

								<li>
									<a target="_blank" href="archives.html" >
										<i class="fa fa-sort"></i>
										归档
									</a>
								</li>

								<li class="dropdown">
									<a href="#" class="dropdown-toggle" data-toggle="dropdown"
									   data-hover="dropdown">
										<i class="fa fa-fire"></i>
										文章分类
										<strong class="caret"></strong>
									</a>
									<ul class="dropdown-menu">
										<li v-for="(typeStatistics, i) in articleTypeStatistics">
											<a :href="'blogsort.html?' + typeStatistics.id + '###' + typeStatistics.typeName" target="_blank">
												<i class="fa "></i>{{typeStatistics.typeName}}({{typeStatistics.count}})
											</a>
										</li>
									</ul>
								</li>

								<li>
									<a target="_blank" href="about.html" >
										<i class="fa fa-user"></i>
										关于我
									</a>
								</li>

							</ul>
						</div>
					</nav>
				</div>
			</div>
		</div>
	</nav>

	<a href="https://gitee.com/colinWu_java/interview" target="_blank">
		<img style="position: absolute; width:100px; top: 0; left: 0; border: 0;"
			 src="static/picture/fork-me.png"
			 alt="Fork me on GitHub">
	</a>

	<section class="content-wrap">
		<div class="container">
			<div class="row">
				<main class="col-md-12 main-content ">
					<!--广告栏位-->
					<div class="ad">
						<div class="row">
							<div class="col-md-12">
								<a :href="paramObj.ad_url" rel="nofollow" target="_blank">
									<img class="img-responsive center-block"
										 title="阿里云活动"
										 :src="paramObj.ad_1002_url"
									>
								</a>
							</div>
						</div>
					</div>

					<p id="process"></p>
					<article class="post">
						<div class="post-head">
							<h1>
								{{articleTypeName}}
							</h1>
						</div>

						<div class="articleTypeList" id="container" v-for="(article, i) in articleList">
							<p>
								<a :href="'blogdetail.html?' + article.id" target="_blank">
									{{i + 1}}.&nbsp;{{article.articleName}}
								</a>
							</p>
						</div>

						<div class="post-footer">
							<div class="col-sm-10">
								<div>
									转载声明：本博客由波波老师创作。可自由转载、引用，但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
								</div>
							</div>
							<div class="col-sm-2">
								<img :src="paramObj.user_weixin_url" width=100%/>
							</div>
						</div>

					</article>

				</main>

			</div>
		</div>
	</section>
	<footer class="main-footer">
		<div class="container">
			<div class="row">
			</div>
		</div>
	</footer>

	<a id="back-to-top" class="icon-btn hide">
		<i class="fa fa-chevron-up"></i>
	</a>

	<div class="copyright">
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
                <span>Copyright &copy; 2021 - 2012
                </span> |
					<span>
                    Powered by Colin
                </span> |
					<span>
                    鄂ICP备20013491号-1
                </span>
				</div>
			</div>
		</div>
	</div>

</div>
<script src="static/js/jquery.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-hover-dropdown.min.js"></script>
<script src="static/js/search.js"></script>
<script async src="static/js/busuanzi.pure.mini.js"></script>
<script src="static/js/app.js"></script>
<script src="static/js/jquery.fancybox.js"></script>

<!--&lt;!&ndash; 引入VUE &ndash;&gt;-->
<!--<script src="static/js/vue.js"></script>-->
<!--&lt;!&ndash; CDN引入外部资源axios:用来做请求发送的 &ndash;&gt;-->
<!--<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>-->
<!--&lt;!&ndash; 引入样式 &ndash;&gt;-->
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<!--&lt;!&ndash; 引入共用js文件 &ndash;&gt;-->
<!--<script src="static/js/common.js"></script>-->
<!-- ----引入在线地址------------------------------------------------------ -->
<!-- 引入VUE -->
<script src="static/js/vue.js"></script>
<!-- CDN引入外部资源axios:用来做请求发送的 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入共用js文件 -->
<script src="static/js/common.js"></script>


<script type="text/javascript">
	//使用Vue
	let app = new Vue({
		//挂载点
		el: '#app',
		//数据区
		data: {
			//文章列表
			articleList: [],
			articleTypeStatistics: [],
			paramObj: {},
			articleTypeName: '',
		},
		//编写函数方法的地方
		methods: {
			//1.根据文章类型获取所有文章列表信息
			getArticleListByTypeId: function () {
				//获取地址栏URL路径
				let url = location.href;
				//拿到问号后面的字符串
				let param = url.substr(url.indexOf("?") + 1);
				//对中文进行编码，否则会出现乱码问题
				param = decodeURIComponent(param);
				let paramArray = param.split("###");
				//获取文章类型ID
				let articleTypeId = paramArray[0];
				//获取文章类型名称
				this.articleTypeName = paramArray[1];
				//发请求查询文章类型下所有文章数据
				this.$http.get('/article/getArticleListByTypeId/' + articleTypeId).then(result => {
					this.articleList = result.data;
				}).catch(error => {
					console.log(error);
				});
			},



			//统计每个文章分类下面文章的数量
			selectArticleTypeStatistics() {
				this.$http.get('/article/statisticsByArticleType').then(result => {
					this.articleTypeStatistics = result.data;
				}).catch(error => {
					console.log(error);
				});
			},
			//按照文章发布时间分组统计数量
			getAllParam() {
				this.$http.get('/param/getAllParam').then(result => {
					this.paramObj = result.data;
				}).catch(error => {
					console.log(error);
				});
			},
		},
		//钩子函数
		mounted() {
			//根据文章类型获取所有文章列表信息
			this.getArticleListByTypeId()

			//统计每个文章分类下面文章的数量
			this.selectArticleTypeStatistics();

			//获取所有参数信息
			this.getAllParam();

		}
	})
</script>

</body>
</html>